<template>
<div class='clearfix index'>
  <div class='tab clearfix'>
    <div @click="openview('a')">
      <img src="./img/routeimg1.png" alt="">
      综合展示</div>
    <div @click="openview('b')">
      <img src="./img/routeimg2.png" alt="">      
      能源监测</div>
    <div @click="openview('c')">
      <img src="./img/routeimg3.png" alt="">      
      能源统计</div>
    <div @click="openview('d')">
      <img src="./img/routeimg4.png" alt="">
      能源分析</div>
    <div @click="openview('e')" style="margin-right:0">
      <img src="./img/routeimg5.png" alt="">      
      生产管理</div>    
  </div>
  <div class="left_ec">
    <div class='clearfix t'>
      <p class='l'>企业实时负荷率</p>
      <p class='r'>当前符合率：<span style="color:#0780ED">70%</span></p>
    </div>
    <ECl width='522px' height='480px' :data='d'></ECl>
  </div>
  <div class="right_ec">
    <div class='t'>
      <p>企业实时负荷曲线</p>
    </div>
    <ECr width='617px' height='480px' :data='d2'></ECr>    
  </div>
</div>
</template>
<script>
import echarts from "echarts";
import ECl from "./EC_l";
import ECr from "./EC_r";
export default {
  components: {
    ECl,
    ECr
  },
  data() {
    return {
      chart: null,
      d: [
        { name: "#1配电室" },
        { name: "#2配电室" },
        { name: "#3配电室" },
        { name: "#4配电室" },
        { name: "#5配电室" },
        { name: "全负荷标准" }             
      ],
      d2: [
        { name: "#1配电室" },
        { name: "#2配电室" },
        { name: "#3配电室" },
        { name: "#4配电室" },
        { name: "#5配电室" },
      ]
    };
  },
  mounted() {
  },
  beforeDestroy() {},
  methods: {
    // 路由跳转
    openview(path) {
      // this.$route.push({name:'path'})
    }
  }
};
</script>
<style scoped lang='scss'>
.index {
  width: 100%;
}
.tab {
  width: 100%;
  margin: 10px 0;
  div {
    float: left;
    width: 230px;
    height: 100px;
    margin-right: 10px;
    background: linear-gradient(
      -135deg,
      rgba(1, 175, 194, 0.98),
      rgba(7, 128, 237, 1)
    );
    color: #fff;
    font-size: 18px;
    line-height: 100px;
    text-align: center;
    border-radius: 5px;
    transition: all 0.5s;
    position: relative;
    img {
      left: 0;
      position: absolute;
      display: block;
      width: 55px;
      opacity: 0.2;
      transition: all 0.5s;
    }
  }
  div:hover {
    margin-top: -10px;
    font-size: 20px;
    line-height: 150px;
    box-shadow: #999 5px 5px 10px;
  }
  div:hover img {
    opacity: 1;
    left: 50%;
    transform: translate(-50%);
  }
}
.left_ec {
  width: 542px;
  height: 560px;
  float: left;
  background: #fff;
  padding: 0px 10px;
  box-sizing: border-box;
  .t {
    padding: 20px 10px 20px 10px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 20px;
    font-size: 16px;
    color: #333;
    .l {
      float: left;
    }
    .r {
      float: right;
    }
  }
}
.right_ec {
  width: 637px;
  height: 560px;
  float: right;
  background: #fff;
  padding: 0px 10px;
  box-sizing: border-box;
  .t {
    padding: 20px 10px 20px 10px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 20px;
    font-size: 16px;
    color: #333;
  }
}
</style>

